<template>
   <van-nav-bar
    title="未读"
  />
  <form action="/">
    <van-search
      v-model="search"
      placeholder="请输入搜索关键词"
      show-action
      @search="onSearch"
      @cancel="onCancel"
      @input="handleInput"
      />
   </form>
   <van-checkbox-group >
        <van-cell-group>
        <van-cell
            v-for="(item, index) in unready"
            clickable
            :key="item.name"
            :title="item.name"
            @click.stop="toggles(item)"
        >
        <van-checkbox v-show="role===1?true:false" shape="squre"  :checked="item.state" :name="item.name"   />
        </van-cell>
        </van-cell-group>
      </van-checkbox-group>
      <div class="button" v-show="role===1?true:false" >
    <van-button  size="large"   @click="cancel">全部不选</van-button>
    <van-button  size="large"  type="primary"  v-show="!isshow"  @click="correct"  >全选</van-button>
    <van-button  size="large"  type="primary"  v-show="isshow"   @click="check"  >通知一下</van-button>
  </div>
</template>

<script>
import { defineComponent,onMounted,reactive,ref,watch } from 'vue'
import { showNotify } from 'vant';
import {gainUnReadPeople,searchUnReadPeople,notice} from '../api'
import { throttle } from 'lodash';
export default defineComponent ({
 setup(){
    const role=ref(0)
    const search=ref("")
    const isshow=ref(false)
    const unready=ref([])
    const list=ref([])
    const throttledReq=throttle(req,2000)
    const parameter=reactive({name:'',taskId:''})
    const userid=ref()
    const userNameList=ref()
  
    watch(search, throttledReq)
      function req() {
      // 处理搜索请求的逻辑
      sratchList()
    }
    onMounted(()=>{
      getList()
    })
  
      const  getList=async()=>{
        let index=window.location.hash.indexOf("taskId")
        if(index!=-1){
          var currentURL = window.location.href;
         parameter.taskId=currentURL.split("?")[2].split("=")[1]
         let code=currentURL.split("?")[1].split("&")[0].split("=")[1]
            localStorage.setItem("code", code )
            gainUnReadPeople({params:{taskId:parameter.taskId}}).then((res)=>{
            if(res.data.code==="200"){
              let data=res.data.data
              unready.value=data.unReadPeople
              userid.value=data.user.id
              console.log(data.user.id)
              role.value=data.user.role               
            }else{
              showNotify({ type: 'danger',message:res.data.msg });
            }
        })
        }//先解析路径上面的taskId和Code，我们需要taskId和Code进行下一步请求 
     }
     const  sratchList=async()=>{
      searchUnReadPeople({params:{name:search.value,taskId:parameter.taskId,userId:userid.value}}).then((res)=>{
            if(res.data.code==="200"){
              let data=res.data.data
              unready.value=data.unReadPeople          
            }else{
              showNotify({ type: 'danger',message:res.data.msg });
            }
        })
       
     }
     
      const onSearch=()=>{
        sratchList()
      }
      const check=()=>{
       list.value=unready.value.filter(item=>item.state===true)
       userNameList.value= list.value.map(item=>item.name)
        notice({taskId:parameter.taskId, userNameList:JSON.stringify(userNameList.value),userId:userid.value}).then(res=>{
          if(res.data.code==="200"){ 
            isshow.value=false
           unready.value.forEach((val)=>{
           val.state=false
           showNotify({ type: 'success', message: '通知成功！' });
       })
          }else{
            showNotify({ type: 'danger', message: '请检查网络连接！' });
          }   
        })       
      }
      const correct=()=>{
        unready.value.forEach((val)=>{
          val.state=true
       })
       isshow.value=true
      }
      const cancel=()=>{
        isshow.value=false
        unready.value.forEach((val)=>{
          val.state=false
       })
      }
      const toggles=(item)=>{
        isshow.value=true
       unready.value.forEach((val)=>{
       if(val.name===item.name){
           val.state=!val.state
           console.log(val.state)
       }
       })
      }
      const onCancel=()=>{
        console.log("取消")
      }
      const handleInput=()=> {
      // 处理输入框输入事件的逻辑
      throttledReq(); // 调用节流后的req方法
    }

    return {
        role,
        isshow,
        search,
        unready,
        parameter,
        toggles,
        onSearch,
        correct,
        check,
        onCancel,
        cancel,
        handleInput,
    }
 }
})
</script>

<style  lang="less" scoped>
.van-icon{
 left: 30px;
 border-radius:0px !important;
}

.van-checkbox{
  position: relative;
  left: 80px;
}
.button{
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 0px;
  display: flex;
  background-color: #fff;
  justify-content:space-around;
  .van-button{
      border-radius:16px   !important;
  }
}
.van-checkbox-group{
  margin-bottom :50px !important ;
}
.van-button--large{
  height: 45px;
  width: 45%;
}
</style>